<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      radius: 5,
      blur: 15,
      layerName: '',
      vector: new Heatmap({ // 热力图
        name: '热力图',
        source: new SourceVector({
          features: new GeoJSON().readFeatures(HeatData, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:4326'
          })
        }),
        radius: 10, // 半径大小
        blur: 10, // 模糊
        gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00'] // 热力图颜色（可以不设置）
      })
    })

    const init = () => {
      const raster = new Tile({
        source: new Stamen({
          layer: 'toner'
        })
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [raster, state.vector],
        view: new View({
          center: [20.042007, -35.349998],
          zoom: 19 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }

    // 修改半径大小
    const changeRadius = () => {
      state.vector.setRadius(parseInt(state.radius, 10))
    }

    // 修改模糊半径
    const changeBlur = () => {
      state.vector.setBlur(parseInt(state.blur, 10))
    }

    const getHeatName = () => {
      const layers = state.map.getLayers()
      for (var i = 0; i < layers.getLength(); i++) {
        // console.log(layers.item(i))
        console.log('图层名：', layers.item(i).get('name'))
        state.layerName = layers.item(i).get('name')
      }
    }
    `
    return {
      code
    }
  }
}
</script>
